<template>
    <el-container  id="body">
        
        


        <el-header class=" bg-pink-300 rounded">

            <Header @loginfun="handleRegister" />

        </el-header>


        <el-container>
            <el-container>
                <el-main>

                    <!-- 联系客服 -->
                    <div class="float-right bg-pink-300 border-2 border-pink-500 rounded-lg" id="showWindows">
                        
                        <button style="display: flex; flex-direction: column; align-items: center; text-align: center;  height: 100%;" class="text-white px-1"
                        @click="showCustomer" 
                        >
                        <el-icon class="text-white"><Service /></el-icon>
                            联
                            <br>系
                            <br>客
                            <br>服
                        </button>
                    </div>

                    <el-drawer title="联系客服" v-model="drawerShow" direction="rtl" size="59%" 
                       :destroy-on-close="true" :show-close="true" :wrapperClosable="true"
                        style="height: 65%; position: fixed; top:50%; left:50%; transform:translate(-50%,-50%);" class=" rounded-3xl bg-pink-200 border-2 border-pink-500">
                       <span>联系电话 123456</span>
                       <br>
                       <span>qq联系 123456@qq.com</span> 
                    </el-drawer>

                    <el-card shadow="never" style="width: 90%; display: flex; margin: 0 auto; " id="show">
                        <template #header>
                        <div>
                            公告
                        </div>
                        </template>
                        本店诚信买卖
                    </el-card>
                    

                    <br>
                    <!-- 一级菜单 -->
                    <el-card shadow="never" style="width: 90%; display: flex; margin: 0 auto; " id="show"
                        class="rounded-xl"
                         >
                            <el-button type="text"  @click="handleSubCategoryClick('全部')" class=" text-pink-600 text-2xl h-10 " id="all" >
                                <div class="px-4" id="font"
                                >全部商品</div>
                            </el-button>

                            <el-button type="text"  @click="handleMainCategoryClick(index,item.MainCategory)" class=" text-pink-600 text-2xl h-10 " id="all" v-for="item,index in menuArray" :key="index">
                                <div class="px-4" id="font">{{item.MainCategory}}</div>
                            </el-button>
                    </el-card>

                    <br>

                    <!-- 二级菜单 -->
                    <el-card shadow="never" style="width: 90%; display: flex; margin: 0 auto;" id="show"
                        class="rounded-xl"
                      v-show="showSubCategory" >
                        
                            <div  id="font" v-for="item,index in menuArray" :key="index">
                                <!-- 在二级菜单中判断当前菜单项是否应该显示 -->
                                <el-button v-show="selectedIndex === index" type="text"  class=" text-pink-600 text-2xl h-10 " id="all" 
                                v-for="item1,index1 in item.SubCategory" :key="index1"
                                @click="handleSubCategoryClick(item1.SubCategory)" >
                                {{item1.SubCategory}}
                                </el-button>
                            </div>
                    </el-card>

                    <br>
                    <!-- 显示数据 -->
                    <el-card shadow="never" style="width: 90%; display: flex; margin: 0 auto; " id="show"
                        class="rounded-xl"
                        >

                        <div style="display: flex;  flex-wrap: wrap;" class="ml-3" v-show="shoppingData.length > 0">

                            <div class="mr-9" v-for="item2,index2 in shoppingData" :key="index2"
                            @click="infoFun">
                            
                                    <el-image style="width: 100px; height: 100px"                                  
                                    :src="'http://00000.work:10002/'+item2.productImage"
                                    :fit="fit" @click="shopping(item2.id)" class="rounded-3xl"/>
                            <div>

                                        
                                        <el-tag type="info"  effect="dark"  @close="" class="bg-pink-400 border-pink-400">销量{{item2.salesVolume}}</el-tag>
                                    </div> 
                                <div style="width: 100px; word-wrap: break-word; word-break: break-all;">
                                    {{item2.productName}}
                                </div>

                                <div style="width: 100px; word-wrap: break-word; word-break: break-all;">
                                    ￥{{item2.productPrice}}
                                </div>
                            </div>


                                                                                                                    

                        </div>  
                    </el-card>

                    <br>

                    <!-- 商品信息 -->
                    <el-card  shadow="never" style="width: 90%;  margin: 0 auto;" id="show" class="rounded-xl"
                        v-show="shoppings"
                        
                       >
                       <!-- ref="shopping" -->
                        <template #header>
                            <div>
                                <span id="info">商品信息</span>
                            </div>
                        </template>

                        <div>
                            <el-card shadow="never" id="goods_info"
                                style=" display: flex; justify-content: center; align-items: center;"
                                v-model="shoppingGoods"
                                >
                                <div class="bg-pink-200 border-2 border-yellow-300 px-4 py-4 text-purple-500" style="align-items: center;">
                                    {{shoppingGoods.text}}
                                </div>

                                
                            </el-card>
                        </div>

                        <br>

                        
                            <el-card shadow="never" id="goods_info" 
                            v-model="shoppingGoods" >

                            <!-- <div> -->
                                <el-image style="width: 500px; height: 500px"                                  
                                    :src="'http://00000.work:10002/'+shoppingGoods.productImage"
                                    :fit="fit" class="rounded-3xl"/>
                            <!-- </div> -->

                            <div class="float-right">
                                <el-form :model="form" ref="form" :rules="rules" :inline="false" size="normal">
                                    <el-form-item label="发货方式" size="normal" >
                                        <el-tag type="success" size="normal" effect="dark" @close="" class="rounded-3xl">
                                            自动发货
                                        </el-tag>

                                    </el-form-item>

                                    <el-form-item label="上架时间" size="normal" >
                                        <el-tag type="success" size="normal" effect="dark" @close="" class="rounded-3xl">
                                            2023-10-23
                                            {{ shoppingGoods.date }} 
                                        </el-tag>

                                    </el-form-item>
                                   
                                    <el-form-item label="剩余库存" size="normal">

                                       
                                        <el-tag type="success" size="normal" effect="dark" @close=""
                                        
                                            class="ml-2 rounded-3xl">  {{ shoppingGoods.remainingQuantity }} </el-tag>

                                    </el-form-item>

                                    <el-form-item label="购买数量" size="normal">
                                        <el-input type="Number" size="normal" v-model="num"  @change=""></el-input>
                                    </el-form-item>

                                    <el-form-item label="订单金额" size="normal">
                                        ￥{{getNum()}}
                                    </el-form-item>



                                    <el-form-item label="联系方式" size="normal">
                                        <el-input v-model="qqValue" placeholder="" size="normal" clearable></el-input>
                                    </el-form-item>
                                </el-form>
                    <!-- 支付条件有联系方式且按钮被触发 -->
                    <el-card shadow="never" style="width: 90%;  margin: 0 auto; background-color: rgba(255, 255, 255, 0); box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0)" id="show" class="rounded-xl"
                       v-if="qqValue !== '' && shoppings" v-model="shoppingGoods">
                        <!--计算属性，子父间传递数据 -->
                        <el-button type="text" size="default" @click="payGoods('alipay',shoppingGoods.id,num,qqValue,jwtToken)" >
                        <!-- <el-button type="text" size="default" @click="payGoods('alipay',19,9,123456789,jwtToken)" > -->
                            <el-image src="/public/alipay.png" fit="fill" :lazy="true" class="ml-5" ></el-image>
                        </el-button>
                        <el-button type="text" size="default" @click="payGoods('wxpay',shoppingGoods.id,num,qqValue,jwtToken)" class="float-right">
                            <el-image src="/public/wepay.png" fit="fill" :lazy="true" ></el-image>
                        </el-button>
                    </el-card>  
                                
                            </div>


                            </el-card>
                        

                    



                    </el-card>


                    <br>
             
                </el-main>
            </el-container>
        </el-container>
    </el-container>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import Header from '/src/component/header.vue'
import {useStoreVar} from "/src/store/useStore.js"
const store = useStoreVar() //获取抛出来的store实例
import{
    getShoppingFrom,
    getShoppingHeadline,
    getShoppingFromid,
    getPayGoods,
}from '/src/api/goods.js'
import { router } from '../router'
import {startLoading,endLoading} from '/src/composables/util.js';   

let menuArray = ref([])
//加载数据
// startLoading(true)
getShoppingHeadline()
.then(response =>{
    menuArray.value = response.data.data;
    //隐藏加载数据
    // endLoading();
})
.catch(error => {
    console.log(error)
})

let shoppingData = ref([]);
onMounted(() =>{
  // 设置默认选中第一个一级菜单项，显示二级菜单
//   handleMainCategoryClick(0);

getShoppingFrom('全部')
    .then(response =>{
        const datas = response.data; //取出返回的数据
        shoppingData.value = datas.data
        
    })
    .catch(error => {
        console.log(error);
    })
})


//在二级菜单中更新selectedIndex变量记录选中一级菜单的索引
const selectedIndex = ref(-1);
//二级菜单控制变量
const showSubCategory = ref(true)
const handleMainCategoryClick = (index,MainCategory) => {
    getShoppingFrom(MainCategory)
    .then( response => {
        const datas = response.data; //取出返回的数据
        shoppingData.value = datas.data
    })
    selectedIndex.value = index;
}

//物品信息
//在组件的数据部分定义一个变量用于存储商品数据
// let shoppingData = ref([]);
//点击二级菜单的处理方法
const handleSubCategoryClick  = (subIndex) =>{
    getShoppingFrom(subIndex)
    .then(response =>{
        const datas = response.data; //取出返回的数据
        shoppingData.value = datas.data
    })
    .catch(error => {
        console.log(error);
    })
}

let num = ref(1)

const shoppings = ref(false)
const shoppingGoods = ref([])

function infoFun(){
    let dom = document.getElementById('info');
    dom.scrollIntoView({behavior:'smooth',});
}
// 获取dom元素
function shopping(id) {

    shoppings.value = true;
    getShoppingFromid(id)
    .then(res =>{
        shoppingGoods.value = res.data.data
        console.log("通过id得到的数据");
        //通过id得到的数据
        console.log(shoppingGoods.value);
    })
    .catch(ero =>{

    })
}
function getNum(){
    return (shoppingGoods.value.productPrice*num.value).toFixed(2);
}

// let qq = ref(null)
// qq.value = "123456789"

const drawerShow = ref(false)
function showCustomer(){
    drawerShow.value = true;
}

const jwtToken = ref(sessionStorage.getItem('jwtToken'));
let Jump = ref('')

let qqValue = ref('')

function handleRegister(qq){
    console.log("联系方式");
    qqValue.value = qq; //将从子组件传递过来的qq值赋值给qqValue变量
    console.log(qq);
}

function payGoods(way,id,num,contact,jwtToken){
    console.log("显示数据");
    console.log(way);
    getPayGoods(way,id,num,contact,jwtToken)
    .then(res =>{
        Jump.value = res.data.data
        window.location.href = Jump.value
        // router.push(Jump.value)
        console.log(Jump.value);
        //支付成功如何返回首页
    })
    .catch(ero =>{
        console.log(ero);
    })
}


</script>

<style>
#body {
    background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202111%2F18%2F20211118224423_90be6.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695300329&t=c5f35cda4199b9a8b3211173efaee644");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    height: 100%;
    width: 100%;

}

#boxCard,
#show {
    border: 2px solid transparent;
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.2);
}

#goods_info {
    border: 2px solid transparent;
    background-color: rgba(255, 255, 255, 0.0);

}

@font-face {
    font-family: "MyFont";
    src: url('../assets/font/Walk-Around-the-Block.ttf');
}

#font {
    font-family: 'MyFont', sans-serif;
}

.el-button--text:not(.is-disabled):focus, .el-button--text:not(.is-disabled):hover{
    color: rgb(226, 13, 123);
    background-color: rgb(235, 191, 206);
    border-color:  rgb(226, 13, 123);
}

#showWindows{
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-10%);
    /* z-index: 9999; */
}

</style>
